<script lang="ts" setup>
import type { LossDetailRes } from '@/types/api/new'
import type { Ref } from 'vue'
import { newApi } from '@/request/api'
import { useHideLoading, useLoading, useModal, useNavBack, useRouteGuard } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { isNil } from 'lodash-es'
import { ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

const oid = ref() as Ref<number>
const detail = ref() as Ref<LossDetailRes>

onLoad(async (query) => {
  const zparse = zobject({
    oid: zstring().regex(/^\d+$/).transform(Number),
  }).safeParse(query)
  if (!zparse.success) {
    return await useRouteGuard()
  }
  oid.value = zparse.data.oid

  await getDetail()
})

async function getDetail() {
  useLoading(true)
  const [err, res] = await to(newApi.lossDetail(oid.value))
  useHideLoading()
  if (err) {
    await useModal({
      title: '温馨提示',
      content: (err as Record<string, any>).data.msg,
      showCancel: false,
      confirmText: '返回',
    })
    return useNavBack()
  }

  detail.value = res
}

function handlePreview(index: number) {
  uni.previewImage({
    urls: detail.value.imgList,
    current: index,
  })
}
</script>

<template>
  <view v-if="!isNil(detail)" class="px-30px pt-20px safe-pb-20px">
    <!--  -->
    <view class="rd-16px bg-white px-20px">
      <view class="flex items-center px-10px">
        <view class="text-24px text-#3 lh-90px">运单号</view>
        <view class="flex-1 text-right text-24px lh-90px">{{ detail.number }}</view>
      </view>
      <view class="flex items-center b-t-1px b-t-#e0 b-t-solid px-10px">
        <view class="text-24px text-#3 lh-90px">快递公司</view>
        <view class="flex-1 text-right text-24px lh-90px">{{ detail.company }}</view>
      </view>
    </view>
    <!--  -->
    <view class="mt-10px rd-16px bg-white px-20px">
      <view class="flex items-center px-10px">
        <view class="text-24px text-#3 lh-90px">定损金额</view>
        <view class="flex-1 text-right text-30px text-theme-red lh-90px">¥&thinsp;{{ detail.lossMoney }}</view>
      </view>
      <view class="flex items-center b-t-1px b-t-#e0 b-t-solid px-10px">
        <view class="text-24px text-#3 lh-90px">定损时间</view>
        <view class="flex-1 text-right text-24px lh-90px">{{ detail.updateTime }}</view>
      </view>
    </view>
    <!--  -->
    <view class="mt-10px rd-16px bg-white px-20px pb-20px">
      <view class="text-28px text-#3 lh-70px">定损原因</view>
      <view class="text-28px text-#6 lh-[1.5]">{{ detail.cont }}</view>
      <view v-if="!isNil(detail.imgList)" class="grid grid-cols-3 mt-10px gap-5px">
        <template v-for="(item, i) in detail.imgList" :key="i">
          <view @click="handlePreview(i)">
            <ui-aspect-ratio>
              <image class="h-full w-full" :src="item" mode="aspectFill"></image>
            </ui-aspect-ratio>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped></style>
